import React, { Component, useEffect } from 'react'
import { Card } from 'antd'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import ReactEcharts from 'echarts-for-react'
import { diva } from '../../global'
import './style.css';

const PieA = ({ data, lengendData, color, title, middleName, middleNameChange, index, pieIndex }) => {
    const middleInfo = middleNameChange;
    // const [name, setName]=useState('');
    const onClickPie = (info) => {
  if(pieIndex!==1){
    return;
  }else{
    diva.client?.applyScene(`${info.data.name.substring(0, info.data.name.length-1)}总地块`).then(() => {
    })
        .catch((err) => console.log(err))
  }
    }
    useEffect(() => {
        if (index === 0) {
            middleInfo("123");

        }
    }, [index]);

    let option = {
        title: {
            x: 'center'
        },
        tooltip: {
            // trigger: 'axis',
            //提示框浮层内容格式器，支持字符串模板和回调函数形式。
            formatter: " {b} : {c}亩 ({d}%)"
        },

        legend: {
            orient: 'horizontal',
            bottom: 0,
            right: 0,
            x: 'center',
            data: lengendData,
            itemHeight: 5,
            itemWidth: 8,
            textStyle: {
                fontSize: '12px',
                color: '#fff'
            }
        },
        color: color,
        series: [
            {
                name: title,
                type: 'pie',
                radius: ['20%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    // borderRadius: 10,
                    // borderColor: '#fff',
                    // borderWidth: 2
                },
                label: {
                    fontSize:10,
                    show: true,
                    position: 'inner',
                    formatter: '\n{b}\n\n{c}亩',
                    color:'white',
                    fontWeight: 800
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 25,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data,
            }
        ]
    }

    return (
        <Card.Grid className="pie_a" style={{height: 215, marginBottom:50, marginTop:'-44px'}} >
            <ReactEcharts height={300} option={option} onEvents={{click: (info)=>onClickPie(info)}} />
        </Card.Grid>
    )

}
export default PieA;